<template>
  <div style="margin-left:0px;">
    <el-alert :title="title" type="info" :closable="false" class="mb-2" show-icon></el-alert>
    <br>
    <div class="excel-filed">
      <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
      <br>
      <el-checkbox-group v-model="selectFileds" @change="handleCheckedFieldChange">
        <el-checkbox v-for="item in exportFields" :key="item.value" :label="item">{{ item.label }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div style="padding: 10px 0px; text-align: right;">
      <el-button @click="onCancel()">取 消</el-button>
      <el-button type="primary" @click="onExport()">确 定</el-button>
    </div>
  </div>
</template>
<script>
import * as common from '@/utils/common'
// import { mapState } from 'vuex'
import * as baseApi from '@/api'
import { Loading } from 'element-ui'

export default {
  name: 'ExcelExport',
  // 上传成功触发 onSuccessClick
  props: {
    title: {
      type: String,
      default() {
        return '将根据最后一次查询过滤、排序、分页条件过滤导出为excel文件,请选择要导出的列：'
      }
    },
    // eslint-disable-next-line vue/require-default-prop
    pageDto: Object,
    // eslint-disable-next-line vue/require-default-prop
    exportApi: String,
    // eslint-disable-next-line vue/require-default-prop
    exportFields: Array
  },
  data() {
    return {
      checkAll: false,
      // 可半选
      isIndeterminate: false,
      // 选中要导出的字段
      selectFileds: []
    }
  },
  methods: {
    async onExport() {
      var loading = Loading.service({
        // target: document.getElementById('#app')
        fullscreen: true,
        text: '正在生成Excel，请稍后...'
      })

      var vals = []
      this.selectFileds.forEach(element => {
        vals.push(element.value)
      })
      await baseApi.apiRequest(this.exportApi, Object.assign({ fields: common.Array2String(vals, '|', true) }, this.pageDto), 'GET', this, null, 1)

      loading.close()
      this.$emit('close')
      // setTimeout(() => {
      //   loading.close()
      //   this.$emit('close')
      // }, 3000)
    },
    onCancel() {
      // console.log(this.pageDto)

      // var vals = []
      // this.selectFileds.forEach(element => {
      //   vals.push(element.value)
      // })
      // console.log(common.Array2String(vals, ',', true))

      this.$emit('close')
    },
    handleCheckAllChange(val) {
      this.selectFileds = val ? this.exportFields : []
      this.isIndeterminate = false
    },
    handleCheckedFieldChange(vals) {
      const checkedCount = vals.length
      this.checkAll = checkedCount === this.exportFields.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.exportFields.length
    }
  },
  // eslint-disable-next-line vue/order-in-components
  computed: {
    // ...mapState(['user'])
  },
  // eslint-disable-next-line vue/order-in-components
  mounted() {
    this.checkAll = true
    this.selectFileds = this.exportFields
  }
}
</script>
<style lang="scss" scoped>
.excel-filed .el-checkbox {
  line-height: 25px;
  height: 25px;
  padding: 10px 0px;
}
</style>
